<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/KaTeX/0.9.0-alpha2/katex.min.css" rel="stylesheet">
    <!--<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet">-->
    <title>Document</title>
</head>

<body>
<!-- Include stylesheet -->
<!-- Create the editor container -->
<form action="http://127.0.0.1:8888/insertOne" method="post">
    <div id="editor" style="height: 500px">
    </div>
    <input name="desc" type="hidden" class="desc">
    <div class="">
        <label>
            标题
            <input type="text" name="title" class="title">
        </label>
    </div>
    <div class="">
        <input type="submit" name="submit" class="">
        <span class="time"></span>
    </div>
</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/KaTeX/0.9.0-alpha2/katex.min.js"></script><!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
    $(function () {
        hljs.configure({
            languages: ['javascript', 'ruby', 'python', 'java']
        });
        let toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
            [{'header': 1}, {'header': 2}],               // custom button values
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
            [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
            [{'direction': 'rtl'}],                         // text direction
            [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
            [{'header': [1, 2, 3, 4, 5, 6, false]}],
            [{'color': []}, {'background': []}],          // dropdown with defaults from theme
            [{'font': []}],
            [{'align': []}],
            ['clean'], // remove formatting button,
            ['formula'],
            ['video'],
            ['image'],
        ];
        let quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                'formula': true,
                'toolbar': toolbarOptions,
                'history': {
                    'delay': 2500,
                    'userOnly': true
                },
                'syntax': true
            }
        });
        quill.on('text-change', change);
        quill.on('blur', change);
        quill.on('editor-change', change);
        quill.on('selection-change', change);

        function change() {
            $(".desc").val(JSON.stringify(quill.getContents()));
        }
        $('form').submit(function () {
            let desc = quill.getText();
            let title = $('.title').val();
            return !(desc === '' || title === '')
        })
    });
</script>
</body>

</html>